Bug 147158

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:

Version:

528+ (Nightly build)

Hardware:

iPhone / iPad

OS:

iOS 8.2

Attachments:

Description	Flags
iphone 6+ test case	none
Razr m test with no problem	none

narfity

Reported 2015-07-21 12:27:22 PDT

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.

Attachments
iphone 6+ test case (74.93 KB, image/jpeg) 2015-07-21 12:27 PDT, narfity	no flags	Details
Razr m test with no problem (18.93 KB, image/png) 2015-07-21 12:28 PDT, narfity	no flags	Details
View All Add attachment proposed patch, testcase, etc.

narfity

Comment 1 2015-07-21 12:28:51 PDT

Created attachment 257193 [details] Razr m test with no problem

David Kilzer (:ddkilzer)

Comment 2 2015-07-21 12:53:43 PDT

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?

narfity

Comment 3 2015-07-21 13:17:21 PDT

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.

Myles C. Maxfield

Comment 4 2015-07-21 13:30:04 PDT

This works for me on my iPhone 6 running iOS 9 beta

Myles C. Maxfield

Comment 5 2015-07-21 13:31:11 PDT

Also works for me on my iPhone 6 Plus running iOS 9 beta

Simon Fraser (smfr)

Comment 6 2015-07-21 13:32:18 PDT

Fixed in iOS 9 beta, if not before.

Myles C. Maxfield

Comment 7 2015-07-21 13:33:34 PDT

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.

narfity

Comment 8 2015-07-21 14:19:12 PDT

I updated to 8.4. Problem still reproduces. Hopefully beta 9 has fixed it.

Note You need to log in before you can comment on or make changes to this bug.