Avatar for Username

Sykje yn Support

Mij stipescams. Wy sille jo nea freegje in telefoannûmer te beljen, der in sms nei ta te stjoeren of persoanlike gegevens te dielen. Meld fertochte aktiviteit mei de opsje ‘Misbrûk melde’.

Mear ynfo

Dizze konversaasje is argivearre. Stel in nije fraach as jo help nedich hawwe.

SVG clip-paths behaving oddly in combination with CSS

  • 1 antwurd
  • 1 hat dit probleem
  • 1 werjefte
  • Lêste antwurd fan Shadow110

Shambla
Shambla
more options

Our team came across an SVG clip-path issue based on a component within our web application.

Here is a simplified example: https://jsfiddle.net/dzs6jcgr/6/

I have set up a clip rectangle set to the same bounds as the visible gray rectangle.

Expected Behavior: The blue circle should be chopped in half, while the red circle should be rendered fully since it is within the clip rectangle

Actual Behavior: The blue circle is chopped in half and the red circle's lower right section is also chopped.

Notes:

The expected behavior is present in Chrome as well as modern Firefox versions prior to 58.

It appears the parent group element is not resized to account for any transforms (scale, translate, etc.)

Our team came across an SVG clip-path issue based on a component within our web application. Here is a simplified example: https://jsfiddle.net/dzs6jcgr/6/ I have set up a clip rectangle set to the same bounds as the visible gray rectangle. Expected Behavior: The blue circle should be chopped in half, while the red circle should be rendered fully since it is within the clip rectangle Actual Behavior: The blue circle is chopped in half and the red circle's lower right section is also chopped. Notes: The expected behavior is present in Chrome as well as modern Firefox versions prior to 58. It appears the parent group element is not resized to account for any transforms (scale, translate, etc.)

Alle antwurden (1)

Shadow110
Shadow110
more options

Hi, Firefox is not as forgiving with coding errors as other browsers are. W3C.org (World Wide Web Consortium) in charge of standards and practices and future development of web pages and web browsers make the rules on code. Mozilla Firefox follows these rules. W3C.org Who make the rules for web code. Check your code. HTML https://validator.w3.org/ CSS https://jigsaw.w3.org/css-validator/ and https://validator.w3.org/i18n-checker/ and http://mobile.css-validator.org/

HTML Errors - https://validator.w3.org/nu/?doc=https%3A%2F%2Fjsfiddle.net%2Fdzs6jcgr%2F6%2F CSS - perfect.

Hi, and yes figured out it was not your page that had the HTML errors in it. It was looking at the sites.

The box your trying to fill is bigger than the numbers you have set out for it. I would think that then holds true for circle.

Am sure someone will take a look at this further.

Bewurke troch Shadow110 op