เหตุใดการเปลี่ยนแปลงนี้จึงแสดงแตกต่างออกไปบน Chrome และ Firefox

ฉันมีภาพเคลื่อนไหว SVG ต่อไปนี้ (เป็นตัวอย่างข้อมูลที่ค่อนข้างใหญ่ โปรดดูที่ 'แสดงข้อมูลโค้ด'):

.logo > .logo-compass-frame {
  fill: none;
  stroke: black;
  stroke-width: 15;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.logo > .logo-compass-north, .logo > .logo-compass-south {
  stroke: black;
  stroke-width: 8;
  stroke-miterlimit: 10;
}

.logo > .logo-compass-south {
  fill: none;
}

.logo > .logo-compass-center {
  fill: black;
  stroke: black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.logo > .logo-compass-north, .logo > .logo-compass-south, .logo > .logo-compass-center {
  transition: 0.5s ease-in-out;
  opacity: 1;
}

.logo:hover > .logo-compass-north, .logo:hover > .logo-compass-south {
  transform-origin: center;
}

.logo:hover > .logo-compass-north {

  transform: rotate(90deg) scale(1.5) translate(10px);
}

.logo:hover > .logo-compass-south {
  transform: rotate(90deg) scale(1.5) translate(-10px);
}

.logo:hover > .logo-compass-center {
  opacity: 0;
}
<svg class="logo" x="0px" y="0px" viewBox="0 0 272.6 272.6">
  <circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8" />
  <polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5" />
  <polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1" />
  <circle class="logo-compass-center" cx="138" cy="136.6" r="5.7" />
</svg>

ปัญหาคือว่ามันทำงานแตกต่างออกไปเฉพาะกับ Firefox (ยังไม่ได้ทดสอบบน Edge หรือ IE เหมือนที่ฉันใช้ macOS) สำหรับเบราว์เซอร์ WebKit และ Opera ฉันจะได้รับ:

โครม 60.0.3112.90:

ซาฟารี 10.1:

โอเปร่า 47.0.2631.39:

ไฟร์ฟอกซ์ 54.0.1:

มีบางอย่างคาวเกิดขึ้น ฉันไม่ได้ลองใช้ Edge หรือ IE ดังนั้นอาจเป็นปัญหาบางประการเกี่ยวกับการปฏิบัติตามข้อกำหนดของ CSS ฉันคิดว่าบางที transform-origin อาจไม่ได้รับการสนับสนุนเนื่องจากเป็นเทคโนโลยีทดลอง แต่การเพิ่ม -moz-transform-origin ไม่ได้ทำอะไรเลย และ MDN รายงานว่าขณะนี้ transform-origin ได้รับการสนับสนุนแล้ว

เหตุใดการเปลี่ยนแปลงจึงแสดงแตกต่างกันในเบราว์เซอร์ที่แตกต่างกัน และเป็นไปได้หรือไม่ที่จะแก้ไขปัญหานี้


svg html css cross-browser
person Andrew Li    schedule 12.08.2017    source แหล่งที่มา

คำตอบ (1)


arrow_upward
1
arrow_downward

คุณไม่สามารถใช้ค่าเปอร์เซ็นต์สำหรับแหล่งกำเนิดการแปลงได้ในขณะนี้ เนื่องจากค่าเปอร์เซ็นต์จะได้รับการปฏิบัติที่แตกต่างกันใน Chrome และ Firefox ซึ่งใช้กับค่าหลอกเช่น "center" ซึ่งกำหนดให้เทียบเท่ากับ "50%"

คุณต้องใช้ค่าพิกเซลสัมบูรณ์แทนจึงจะสามารถใช้งานข้ามเบราว์เซอร์ได้

.logo > .logo-compass-frame {
  fill: none;
  stroke: black;
  stroke-width: 15;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.logo > .logo-compass-north, .logo > .logo-compass-south {
  stroke: black;
  stroke-width: 8;
  stroke-miterlimit: 10;
}

.logo > .logo-compass-south {
  fill: none;
}

.logo > .logo-compass-center {
  fill: black;
  stroke: black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.logo > .logo-compass-north, .logo > .logo-compass-south, .logo > .logo-compass-center {
  transition: 0.5s ease-in-out;
  opacity: 1;
}

.logo:hover > .logo-compass-north {
  transform-origin: 138px 99px;
}

.logo:hover > .logo-compass-south {
  transform-origin: 138px 173.5px;
}

.logo:hover > .logo-compass-north {

  transform: rotate(90deg) scale(1.5) translate(10px);
}

.logo:hover > .logo-compass-south {
  transform: rotate(90deg) scale(1.5) translate(-10px);
}

.logo:hover > .logo-compass-center {
  opacity: 0;
}
<svg class="logo" x="0px" y="0px" viewBox="0 0 272.6 272.6">
  <circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8" />
  <polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5" />
  <polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1" />
  <circle class="logo-compass-center" cx="138" cy="136.6" r="5.7" />
</svg>

อัปเดต

ฉันหาคำตอบแล้วว่าทำไม Firefox ถึงมีพฤติกรรมแตกต่างออกไป มันไม่ใช่ข้อผิดพลาด Firefox ถูกต้องจริงๆ เป็นเพราะ Firefox ตีความข้อมูลจำเพาะได้อย่างถูกต้องและเบราว์เซอร์อื่นๆ ไม่ได้ตีความ

สาเหตุโดยตรงเกิดจากการที่เราระบุ transform-origin ในกฎ :hover ดังนั้นต้นกำเนิดจึงถูกสอดแทรก (เช่น การเคลื่อนไหว) ด้วยเช่นกัน การแก้ไขคือ:

  1. ระบุว่าเราต้องการเปลี่ยนคุณสมบัติการแปลงเท่านั้น

    transition: transform 0.5s ease-in-out;

  2. หรือย้าย transform-origin ออกจากกฎโฮเวอร์

ด้านล่างนี้เป็นเวอร์ชันอัปเดตที่ใช้แนวทาง #2

.logo > .logo-compass-frame {
  fill: none;
  stroke: black;
  stroke-width: 15;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.logo > .logo-compass-north {
  stroke: black;
  stroke-width: 8;
  transform-origin: 138px 99px;
}

.logo > .logo-compass-south {
  stroke: black;
  stroke-width: 8;
  fill: none;
  transform-origin: 138px 173.5px;
}

.logo > .logo-compass-center {
  fill: black;
  stroke: black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.logo > .logo-compass-north, .logo > .logo-compass-south, .logo > .logo-compass-center {
  transition: 0.5s ease-in-out;
  opacity: 1;
}

.logo:hover > .logo-compass-north {
  transform: rotate(90deg) scale(1.5) translate(10px);
}

.logo:hover > .logo-compass-south {
  transform: rotate(90deg) scale(1.5) translate(-10px);
}

.logo:hover > .logo-compass-center {
  opacity: 0;
}
<svg class="logo" width="300px" viewBox="0 0 272.6 272.6">
  <circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8" />
  <polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5" />
  <polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1" />
  <circle class="logo-compass-center" cx="138" cy="136.6" r="5.7" />
</svg>

person Paul LeBeau    schedule 12.08.2017
comment
อ๋อ.. ฉันสงสัย transform-origin แต่ฉันลืมไปว่า center เป็นเพียงนามแฝงสำหรับค่าเปอร์เซ็นต์ และ FF ยังไม่รองรับสิ่งนั้นอย่างสมบูรณ์ ขอบคุณ! - person Andrew Li; 12.08.2017
comment
นอกจากนี้ คุณคำนวณค่าพิกเซลได้อย่างไร ในความเป็นจริง โลโก้ของฉันอยู่บนแถบนำทาง - person Andrew Li; 12.08.2017
comment
ฉันค้นหาศูนย์กลางโดยการเปิดเครื่องมือ dev และเลือกองค์ประกอบที่สนใจด้วยเครื่องมือเลือกองค์ประกอบ จากนั้นในคอนโซลฉันพิมพ์: var b=$0.getBBox(); จากนั้น b.x+b.width/2 และ b.y+b.height/2 - person Paul LeBeau; 12.08.2017
comment
@AndrewLi FF ไม่สนับสนุนสิ่งนั้นอย่างเต็มที่ Chrome มันผิดนะ พฤติกรรมของ Chrome/Opera ได้รับการกำหนดให้สอดคล้องกับ Firefox และข้อกำหนด w3c ไม่ใช่ในทางกลับกัน - person Robert Longson; 12.08.2017
comment
มีวิธีใดที่เป็นไปได้ในการเก็บภาพเคลื่อนไหวปัจจุบันของฉันหรือเขียนใหม่เพื่อให้เป็นไปตามข้อกำหนดแต่ยังคงเหมือนเดิมหรือไม่ - person Andrew Li; 13.08.2017
comment
@AndrewLi ฉันไม่สามารถอธิบายพฤติกรรมแปลก ๆ ที่เหลืออยู่ใน Firefox ได้จริงๆ ดูเหมือนว่าจะมีข้อผิดพลาดเกี่ยวกับวิธีการแก้ไขการแปลงในภาพเคลื่อนไหว ฉันจะไปสอบสวน - person Paul LeBeau; 13.08.2017
comment
@PaulLeBeau ขอบคุณมาก! - person Andrew Li; 13.08.2017