| Summary: | On iPhone 6+, border-radius doesn't seem to work with viewport meta. | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | narfity | ||||||
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | RESOLVED WORKSFORME | ||||||||
| Severity: | Normal | CC: | ddkilzer, mmaxfield, simon.fraser, zalan | ||||||
| Priority: | P2 | ||||||||
| Version: | 528+ (Nightly build) | ||||||||
| Hardware: | iPhone / iPad | ||||||||
| OS: | iOS 8.2 | ||||||||
| Attachments: |
|
||||||||
Created attachment 257193 [details]
Razr m test with no problem
Thanks! Which version(s) of iOS have you tested on? Are you saying for the same version of iOS, the border-radius works on an iPhone 5, but fails to draw on an iPhone 6 Plus? The iPhone 6+ I'm testing on is currently on 8.0.2. I don't have a iPhone 5 handy so I can't check any version numbers. I was just trying to say that previously, an iPhone 5(i think it was an iPhone 5... might have been a 4 or 4s) properly rendered while an iPhone 6+ didn't. Unfortunately, I don't know what version of iOS the older phone was running. If I happen to be able to find an older iPhone to test on, I'll check on iOS version too. This works for me on my iPhone 6 running iOS 9 beta Also works for me on my iPhone 6 Plus running iOS 9 beta Fixed in iOS 9 beta, if not before. Wikipedia says the latest iOS 8 release is iOS 8.4. Perhaps you could try upgrading your phone's OS and see if the problem still reproduces. I updated to 8.4. Problem still reproduces. Hopefully beta 9 has fixed it. |
Created attachment 257191 [details] iphone 6+ test case For iPhone 6+'s, border-radius doesn't work well with <meta name="viewport" content="(list of properties here)">. Here is markup for a test page: <html> <head> <meta content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=0.9,user-scalable=no" name="viewport"> <style> #test { border-radius: 8px; border: 8px solid rgba(255,255,255,0); border-left: 8px solid #777; } </style> </head> <body> <div id="test"> Test </div> </body> </html> Note that commenting out the border-radius style will fix the issue on iPhone 6+. Also, commenting out the border (with rgba(255,255,255,0)) will fix the issue. Commenting out the meta tag will also work. So it's some combination of those 3 things. This happens on any browser on an iPhone 6+. I'm attaching a screen shot from an iPhone 6+ with the problem showing (or really no border showing). I've tested before on iPhone 5 and there was no problem, but I don't have one available on me right now to take a screenshot. I have a screenshot from an android razr m that shows the border working, but apparently I can only attach one file here.