คำถามติดแท็ก safari

Safari เป็นเว็บเบราว์เซอร์ของ Apple ซึ่งเป็นเบราว์เซอร์เริ่มต้นบน macOS และ iOS

14
Overflow: hidden ใช้กับ <body> ทำงานบน iPhone Safari ได้หรือไม่
ไม่overflow:hiddenนำไปใช้กับ&lt;body&gt;การทำงานบน iPhone Safari? ดูเหมือนจะไม่ใช่ ฉันไม่สามารถสร้าง Wrapper บนเว็บไซต์ทั้งหมดเพื่อให้ได้สิ่งนั้น ... คุณรู้วิธีแก้ปัญหาหรือไม่? ตัวอย่าง: ฉันมีหน้ายาวและเพียงต้องการซ่อนเนื้อหาที่อยู่ใต้ "พับ" และควรใช้กับ iPhone / iPad
131 iphone  css  ipad  safari  overflow 


10
การทดสอบเว็บแอปพลิเคชันบน Mac / Safari เมื่อฉันไม่ได้เป็นเจ้าของ Mac
เมื่อเร็ว ๆ นี้เมื่อเว็บไซต์ที่ฉันเปิดตัวแสดงอย่างสมบูรณ์แบบบน IE, Firefox, Chrome และ Safari บน Windows แต่เกิดความเสียหายเมื่อดูโดยใช้ Safari บน Mac (โดยผู้มีโอกาสเป็นลูกค้า) ฉันต้องเริ่มทดสอบว่าไซต์ของฉันมีลักษณะอย่างไรเมื่อใด ดูบน Mac ปัญหาคือฉันไม่ได้เป็นเจ้าของ Mac ฉันได้ลองใช้ BrowsrCamp ซึ่งอ้างว่าให้การเข้าถึง VNC กับ Mac ที่ติดตั้งเบราว์เซอร์จำนวนมาก แต่หลังจากพบว่ามันไม่น่าเชื่อถือ (จนถึงตอนนี้ใช้งานได้ 1 วันในช่วง 5 ปีที่ผ่านมา) ฉันต้องการวิธีแก้ปัญหาอื่น ข้อเสนอแนะใด ๆ ?
122 macos  safari 

3
การดีบักใน Web Inspector ของ Safari เมื่อใช้ตัวโหลดโมดูลเช่น SystemJS
ฉันสร้างIonicapp ที่ใช้es6 modules, TypeScriptและSystemJSเป็นรถตักดินแบบโมดูล นี่คือการตั้งค่าของฉัน: tsconfig.json: { "compilerOptions": { ... "target": "es5", "module": "system", ... } } index.html: &lt;script src="lib/system.js"&gt;&lt;/script&gt; &lt;script src="systemjs.config.js"&gt;&lt;/script&gt; &lt;script&gt;System.import('js/app.js')&lt;/script&gt; ตัวอย่างสคริปต์ (TypeScript): import {IConfig} from "./app-config"; export class ConfigLoader { ... } ทุกอย่างทำงานได้ดีใน Chrome อย่างไรก็ตามเมื่อทำการดีบักโดยใช้ Web Inspector ของ Safari ฉันไม่สามารถวางเบรกพอยต์ในสคริปต์ได้เนื่องจาก Web Inspector แสดงเฉพาะสคริปต์ที่โหลดโดยตรงจาก HTML (ผ่านแท็กสคริปต์) ไม่ใช่สคริปต์ที่โหลดโดย XHR …

7
ฉันจะลบเงาบนองค์ประกอบที่เลือกใน Safari บน Mac ได้อย่างไร
บน Mac และอุปกรณ์ iOS ใน Safari &lt;select&gt;องค์ประกอบที่มีสีพื้นหลังจะทำให้เกิดเงาขึ้นเอง สิ่งนี้ดูเหมือนจะไม่เกิดขึ้นในระบบปฏิบัติการอื่น ตัวอย่างเช่นฉันมีองค์ประกอบเลือกที่มีคุณสมบัติลักษณะเหล่านี้: select { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 3px 6px; margin: 10px 0 7px; width: 250px; background-color: #BD2786; color: white; letter-spacing: -.04em; font-weight: bold; border: 0; } และองค์ประกอบของฉันมีสีพื้นหลังที่ฉันต้องการ แต่ความเงายังคงอยู่ที่นั่น ใครรู้วิธีทำให้เป็นสีแบน ๆ

6
ขนาดตัวอักษรบางตัวแสดงผลใหญ่ขึ้นใน Safari (iPhone)
มี CSS หรือเหตุผลอื่น ๆ ที่ Safari / iPhone ละเว้นการตั้งค่าขนาดตัวอักษรหรือไม่? ในเว็บไซต์เฉพาะของฉัน Safari บน iPhone แสดงผลขนาดตัวอักษร: ข้อความ 13px ใหญ่กว่าขนาดตัวอักษร: ข้อความ 15px อาจไม่รองรับขนาดตัวอักษรในบางองค์ประกอบหรือไม่?

1
SVG เปลี่ยนสีเมื่อหมุนใน Safari 10
ฉันเพิ่งพบปัญหาแปลก ๆ ที่ปรากฏใน Safari 10 เท่านั้นฉันมีการ์ดเล่นภาพ svg ซึ่งบางครั้งก็หมุนโดยใช้transform:rotate(xdeg). การ์ดที่ฉันใช้มีรูปแบบบล็อกสีแดง เมื่อมันไม่หมุนหรือหมุนเป็นมุมฉากเช่น 90, 180, 270 ก็จะดูปกติ แต่มุมอื่น ๆ ที่ไม่ใช่พื้นหลังจะเปลี่ยนเป็นสีน้ำเงิน! ฉันเพิ่งได้รับรายงานเกี่ยวกับเรื่องนี้จากผู้ใช้คนหนึ่งของฉันและไม่เคยเห็นอะไรแปลก ๆ เบราว์เซอร์อื่น ๆ ทั้งหมดทำงานได้ตามปกติ Safari 9 ทำงานได้ตามปกติ ฉันเดาว่านี่เป็นเพียงข้อผิดพลาดแปลก ๆ ใน Safari 10 แต่มีความคิดเกี่ยวกับวิธีการแก้ไขหรือไม่ ฉันได้สร้าง repro ขั้นต่ำที่: https://jsfiddle.net/2zv4garu/1/
109 html  css  svg  safari 

14
removeEventListener บนฟังก์ชันที่ไม่ระบุชื่อใน JavaScript
ฉันมีวัตถุที่มีวิธีการอยู่ในนั้น วิธีการเหล่านี้ใส่ลงในวัตถุภายในฟังก์ชันที่ไม่ระบุตัวตน ดูเหมือนว่า: var t = {}; window.document.addEventListener("keydown", function(e) { t.scroll = function(x, y) { window.scrollBy(x, y); }; t.scrollTo = function(x, y) { window.scrollTo(x, y); }; }); (มีรหัสมากกว่านี้มาก แต่ก็เพียงพอที่จะแสดงปัญหา) ตอนนี้ฉันต้องการหยุดผู้ฟังเหตุการณ์ในบางกรณี ดังนั้นฉันจึงพยายามทำ removeEventListener แต่ฉันคิดไม่ออกว่าจะทำอย่างไร ฉันได้อ่านในคำถามอื่น ๆ ว่าไม่สามารถเรียก removeEventListener ในฟังก์ชันที่ไม่ระบุชื่อได้ แต่ในกรณีนี้ก็เป็นเช่นกันหรือไม่ ฉันมีวิธีการใน t ที่สร้างขึ้นภายในฟังก์ชันที่ไม่ระบุตัวตนดังนั้นฉันจึงคิดว่ามันเป็นไปได้ มีลักษณะดังนี้: t.disable = function() { window.document.removeEventListener("keydown", this, false); …

14
iOS Safari - จะปิดการใช้งานการเลื่อนทับได้อย่างไร แต่อนุญาตให้ div แบบเลื่อนเลื่อนได้ตามปกติ
ฉันกำลังทำงานกับเว็บแอปที่ใช้ iPad และจำเป็นต้องป้องกันการเลื่อนมากเกินไปเพื่อให้ดูเหมือนหน้าเว็บน้อยลง ฉันกำลังใช้สิ่งนี้เพื่อหยุดวิวพอร์ตและปิดใช้งานการเลื่อนทับ: document.body.addEventListener('touchmove',function(e){ e.preventDefault(); }); นี้ทำงานได้ดีในการปิดการใช้งานเลื่อน แต่ app ของฉันมี divs เลื่อนหลายและป้องกันโค้ดข้างต้นพวกเขาจากการเลื่อน ฉันกำหนดเป้าหมายเป็น iOS 5 ขึ้นไปเท่านั้นดังนั้นฉันจึงหลีกเลี่ยงโซลูชันแฮ็กเช่น iScroll แต่ฉันใช้ CSS นี้สำหรับ div ที่เลื่อนได้ของฉัน: .scrollable { -webkit-overflow-scrolling: touch; overflow-y:auto; } วิธีนี้ใช้งานได้โดยไม่ต้องใช้สคริปต์ overscroll เอกสาร แต่ไม่ได้แก้ปัญหาการเลื่อน div หากไม่มีปลั๊กอิน jQueryมีวิธีใดบ้างที่จะใช้การแก้ไขแบบโอเวอร์สโคล แต่ยกเว้น div $ ('. scrollable') ของฉัน แก้ไข: ฉันพบสิ่งที่เป็นทางออกที่ดี: // Disable overscroll / viewport moving …

11
เปิดหน้าเว็บใหม่บนแท็บโดยใช้โปรแกรม
ฉันกำลังพยายาม "บังคับ" ให้ Safari หรือ IE7 เปิดหน้าใหม่โดยใช้แท็บใหม่โดยใช้แท็บใหม่ โดยทางโปรแกรมฉันหมายถึงสิ่งที่ต้องการ: window.open('page.html','newtaborsomething');

3
การซ่อนจุดจับปรับขนาด textarea ใน Safari
ฉันใช้คอมโพเนนต์ textarea ในแอปพลิเคชันของฉันและฉันควบคุมความสูงแบบไดนามิก เมื่อผู้ใช้พิมพ์ความสูงจะเพิ่มขึ้นทุกครั้งที่มีข้อความเพียงพอ ใช้งานได้ดีบน IE, Firefox และ Safari อย่างไรก็ตามใน Safari มีเครื่องมือ "ที่จับ" ที่ด้านขวาล่างซึ่งช่วยให้ผู้ใช้สามารถปรับขนาดพื้นที่ข้อความได้โดยคลิกและลาก ฉันยังสังเกตเห็นปัญหานี้กับ textarea ในหน้าถามคำถาม stackoverflow เครื่องมือนี้สร้างความสับสนและโดยทั่วไปแล้วจะเข้ามาขวางทาง ดังนั้นจะมีการซ่อนแฮนเดิลปรับขนาดนี้หรือไม่? (ฉันไม่แน่ใจว่า "ด้ามจับ" เป็นคำที่ถูกต้องหรือไม่ แต่ฉันคิดคำศัพท์ที่ดีกว่านี้ไม่ได้)
97 safari  webkit  css 

12
Safari ใน ios8 กำลังเลื่อนหน้าจอเมื่อองค์ประกอบคงที่ได้รับโฟกัส
ใน IOS8 Safari มีข้อผิดพลาดใหม่พร้อมตำแหน่งที่แก้ไข หากคุณโฟกัสพื้นที่ข้อความที่อยู่ในแผงคงที่ Safari จะเลื่อนคุณไปที่ด้านล่างของหน้า สิ่งนี้ทำให้ UI ทุกประเภทไม่สามารถใช้งานได้เนื่องจากคุณไม่มีวิธีป้อนข้อความลงในพื้นที่ข้อความโดยไม่ต้องเลื่อนหน้าลงจนสุดและสูญเสียตำแหน่งของคุณ มีวิธีใดในการแก้ไขข้อบกพร่องนี้อย่างหมดจดหรือไม่? #a { height: 10000px; background: linear-gradient(red, blue); } #b { position: fixed; bottom: 20px; left: 10%; width: 100%; height: 300px; } textarea { width: 80%; height: 300px; } &lt;html&gt; &lt;body&gt; &lt;div id="a"&gt;&lt;/div&gt; &lt;div id="b"&gt;&lt;textarea&gt;&lt;/textarea&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;
96 javascript  ios  css  safari  ios8 

10
ปิดใช้งานสีข้อความที่ป้อน
HTML แบบง่ายด้านล่างแสดงแตกต่างกันในเบราว์เซอร์ Firefox และ WebKit (ฉันตรวจสอบใน Safari, Chrome และ iPhone) ใน Firefox ทั้งเส้นขอบและข้อความจะมีสีเดียวกัน ( #880000) แต่ใน Safari ข้อความจะจางลงเล็กน้อย (ราวกับว่ามีความโปร่งใสอยู่บ้าง) ฉันจะแก้ไขได้อย่างไร (ลบความโปร่งใสนี้ใน Safari) &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; input:disabled{ border:solid 1px #880000; background-color:#ffffff; color:#880000; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=""&gt; &lt;input type="text" value="disabled input box" disabled="disabled"/&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;
95 iphone  html  css  safari  webkit 

24
แท็กวิดีโอ HTML5 ไม่ทำงานใน Safari, iPhone และ iPad
ฉันพยายามสร้างหน้าเว็บ html5 ซึ่งมีวิดีโอขนาดเล็กเช่น 13s ฉันแปลงเวอร์ชันแฟลชของวิดีโอนี้เป็น 3 รูปแบบ: .ogv โดยใช้ fireFogg, .webm โดยใช้ firefogg และ. mp4 โดยใช้แอปพลิเคชัน HandBrake สคริปต์ html ฉันใช้ในเพจของฉัน: &lt;video width="800" height="640" loop preload="false" autoplay controls tabindex="0"&gt; &lt;source src="xmasvideo/video.mp4" type="video/mp4" /&gt; &lt;source src="xmasvideo/M&amp;P-Xmas 2.ogv" type="video/ogv" /&gt; &lt;source type="video/webm" src="xmasvideo/M&amp;P-Xmas.webm" /&gt; &lt;/video&gt; วิดีโอทำงานได้ดีใน Chrome และ FireFox แต่ไม่ทำงานเลยทั้งใน Safari บนเดสก์ท็อปหรือบน iPhone …

5
NodeJS / express: แคชและรหัสสถานะ 304
เมื่อฉันโหลดเว็บไซต์ที่สร้างด้วย Express ซ้ำฉันจะได้รับหน้าว่างพร้อม Safari (ไม่ใช่ใน Chrome) เนื่องจากเซิร์ฟเวอร์ NodeJS ส่งรหัสสถานะ 304 มาให้ฉัน วิธีแก้ปัญหานี้? แน่นอนว่านี่อาจเป็นเพียงปัญหาของ Safari แต่จริงๆแล้วมันทำงานบนเว็บไซต์อื่น ๆ ทั้งหมดได้ดีดังนั้นจึงต้องมีปัญหากับเซิร์ฟเวอร์ NodeJS ของฉันด้วย res.renderในการสร้างหน้าเว็บที่ผมใช้กับหยก อัปเดต:ดูเหมือนว่าปัญหานี้เกิดขึ้นเนื่องจาก Safari ส่ง'cache-control': 'max-age=0'เมื่อโหลดซ้ำ อัปเดต 2:ตอนนี้ฉันมีวิธีแก้ปัญหา แต่มีวิธีแก้ปัญหาที่ดีกว่านี้หรือไม่ วิธีแก้ปัญหา: app.get('/:language(' + content.languageSelector + ')/:page', function (req, res) { // Disable caching for content files res.header("Cache-Control", "no-cache, no-store, must-revalidate"); res.header("Pragma", "no-cache"); res.header("Expires", …

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.