Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue with border-radius #4

Closed
zessx opened this issue Sep 26, 2013 · 4 comments
Closed

Issue with border-radius #4

zessx opened this issue Sep 26, 2013 · 4 comments
Labels
bug

Comments

@zessx
Copy link

zessx commented Sep 26, 2013

Take this simple HTML code :

<!doctype html>
<html>
    <head>
        <style type="text/css" media="screen">
            div {
                width: 200px;
                height: 200px;
                background: red;
                border-radius: 0 0 30px 30px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

Using SnappySnippet to copy the style, you'll lose a part of border-radius value :
border-radius: 0 0 30px 30px; become border-radius: 0 30px 30px;

I guess we can find the same issue with other 4-val properties
@kdzwinel
Copy link
Owner

That's a very interesting catch! From unknown reasons window.getComputedStyle is returning border-radius: 0 30px 30px for elements that have border-radius: 0 0 30px 30px set. I've checked some other shorthand properties:

border-radius: 0 0 30px 30px;
box-shadow: 0 0 30px 30px black;
margin: 0 0 10px 10px;
padding: 0 0 10px 10px;

And everything but border-radius behaves as expected. So.. congrats! I believe that you have found a browser bug :)

Workaround

Disable the Remove properties with default browser values filter in the SnappySnippet settings menu.

What happens next:

  • I'll play some more with box-shadow to see if I haven't missed anything
  • create a bug report on crbug.com
  • create a workaround in the code

@zessx
Copy link
Author

zessx commented Sep 26, 2013

Bug reported on code.google.com. Issue #298972

@kdzwinel
Copy link
Owner

You were a minute faster than me: Issue #298974 :) The crazy thing is that we created these reports almost in the same time but there still was someone that managed to file a bug between ours (298973). I wonder how Chrome devs manage to read all this stuff.

kdzwinel added a commit that referenced this issue Sep 27, 2013
@kdzwinel
Fix for #4
40676dc 
Updated README.md
@kdzwinel
Copy link
Owner

Workaround added and deployed in version 0.3. Tested on border-radius: 0 0 30px 30px and some other crazy examples from MDN.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kdzwinel @zessx