Serious rendering issues in webOS 2.x #1337

Closed
funkatron opened this Issue Apr 1, 2011 · 28 comments

Projects

None yet

7 participants

@funkatron

I don't know how much of this can be put on you guys: there are obviously serious problems with certain CSS3 features in the webOS 2.x webkit, and I've run into them some in my own apps. Currently they make jQueryMobile almost unusable with the default theme, though.

I've created a Flickr set and screencast to show the differences:

http://www.flickr.com/photos/funkatron/sets/72157626405179506/
http://www.youtube.com/watch?v=hOaybI8tlyo

These issues show up both on device and in emulator -- I took a couple photos of it running on-device to show this.

There are obviously a few issues, but to break them down as I see them:

  • Rendering of borders on list items is, well, "glitchy." Border thickness with when radius is used seems to be way off.
  • Something is seriously wrong with rendering the background/text in pages. I believe I saw this bug when trying to use CSS gradients in my own apps, so it may be related to that.

Switching to the Valencia theme at least makes the text readable on webOS 2.x, but it does not fix the border rendering issues.

Again, I don't know that this is something for the jQMo team to fix, necessarily – I think HP/Palm needs to fix their bugs in WebKit. But, I wanted to make the team aware.

@toddparker
Contributor

Thanks so much for taking the time to take screenshots and document this in such detail. We're big fans of WebOS and have been testing every release on both the Pixi and Pre 1 running 1.4 (they're not upgradable). I didn't realize that people were using 2.0 because the new devices running it aren't landing until the summer but now I see that the Pre 2 is upgradable now so it needs to be on our radar. We'll take a look at this in the emulator and try to figure out what CSS properties + combinations are causing the most issues.

I agree with you though - HP/Palm needs to fix their browser in 2.x because this is an incredible step backwards compared to 1.4 (it has a fantastic browser). I can't imagine they would leave the browser in it's current form because so much of the web must be broken on it. I'm not sure how JQM could even make this work better without dropping all corners, shadows and gradients from WebOS and that's not really an option because we won't use UA detection.

We'd appreciate any help you can rovide in diagnosing and trying to fix this in jQuery Mobile. Cheers!

@funkatron

I'll definitely see what I can do. I'm kind of furious at HP/Palm over this, but I suspect in the short term we need to figure out how to work around it.

A big annoyance here is that previously, 1.4.5 just didn't support some stuff (like CSS background gradients). Now it does -- but in a completely broken way. So you end up with stuff like this, actually worse than it was before.

I'll have to dive in more to see how you guys are doing stuff, but can you load platform-specific CSS code? That could disable certain things that are broken in webOS 2.x.

Ed Finkler
http://funkatron.com
@funkatron
AIM: funka7ron / ICQ: 3922133 / XMPP:funkatron@gmail.com

On Friday, April 1, 2011 at 10:23 AM, toddparker wrote:

Thanks so much for taking the time to take screenshots and document this in such detail. We're big fans of WebOS and have been testing every release on both the Pixi and Pre 1 running 1.4 (they're not upgradable). I didn't realize that people were using 2.0 because the new devices running it aren't landing until the summer but now I see that the Pre 2 is upgradable now so it needs to be on our radar. We'll take a look at this in the emulator and try to figure out what CSS properties + combinations are causing the most issues.

I agree with you though - HP/Palm needs to fix their browser in 2.x because this is an incredible step backwards compared to 1.4 (it has a fantastic browser). I can't imagine they would leave the browser in it's current form because so much of the web must be broken on it. I'm not sure how JQM could even make this work better without dropping all corners, shadows and gradients from WebOS and that's not really an option because we won't use UA detection.

We'd appreciate any help you can rovide in diagnosing and trying to fix this in jQuery Mobile. Cheers!

Reply to this email directly or view it on GitHub:
#1337 (comment)

@ghtomcat
ghtomcat commented Apr 1, 2011

From my experience with jQuery Mobile on webOS 2.1 the background issue can be fixed by removing the background-image attributes from the class .ui-body-c. At least the background works without problems on 1.4.5. Also, i think you guys should get a Pre 2 with webOS 2.1 to test with.

@toddparker
Contributor

I agree. Even without gradients in 1.4, things looked great. Now everything looks terrible so I really hope they are planning on upgrading the browser in a maintenance release. We really like our Palm devices so this is so disappointing.

We're using completely standard, two-stop CSS gradients so something this basic shouldn't be rendered so badly by any browser. We'd need to figure out how target reduced styled for just this version of WebOS which can be messy, esp. if they fix this in a dot release. We're trying really hard to avoid hacks and UA bizness so building themes w/o gradients would be the simplest path for the short term.

Now that we're getting a Pre 2, we'll get a better handle on the problem and try to figure out some workaround.

@ghtomcat
ghtomcat commented Apr 4, 2011

There's another issue in the BaseTagTest function, which i had to change to return false by default to make local images work.

@woztheproblem

Just wanted to say thanks to you guys for looking into this. I'm having the same issues on the Pre 2 and a fix from either HP or you guys would be wonderful!

@scottjehl scottjehl was assigned Apr 12, 2011
@funkatron

Curious to know if there's been progress on this. If not, I'd like to offer some help.

@unwiredben

Biggest thing that would help us is a public URL with a test app showing these issues. Pictures don't help us check against the current in-development browser.

@funkatron

Ben,

http://jquerymobile.com/demos/

I think that always loads the latest build (someone correct me if I'm wrong). That's what I took all my photos from.

@ghtomcat
ghtomcat commented May 2, 2011

ben: i can also send you an IPK of an App where you can see the problem

@toddparker
Contributor

@funkatron - We did some preliminary work for a few hours to try and figure out what CSS properties were causing the worst rendering issues but removing the usual suspects (shadows, rounded corners, gradients) but this didn't seem to have any positive impact on rendering quality. We were hoping that by killing one of these for WebOS 2, things would look a lot better, but no luck.

The really mysterious thing is the extra vertical spacing between list items and similar elements. We didn't get to test every property, but no matter what we did, we weren't' able to get list to kill the extra spacing. It's like 2.0 adds ~2px of vertical margins in there for no good reason.

Lastly, we weren't able to reproduce that really bad screenshot with the inverted looking bg gradient - are you seeing that in current builds?

If you have some time to really dig in and try to figure out how we can adjust the CSS to fix these issues, we'd really appreciate it. And, yes, the /test/ URL is synced every few minutes with the latest in Git so that's the best to test. There is also a nightly/latest version on the CDN now you can use for testing:
http://jquerymobile.com/blog/2011/04/16/nightly-and-up-to-date-builds/

Thanks!
Todd

@unwiredben

Have just tried on in-development webOS 3.0 build of browser. So far, I don't see any of the display glitches there that I do in the 2.0 screenshots.

@toddparker
Contributor

That's great news. Would you mind posting a few screenshots?

@unwiredben

Not yet -- I did notice one render problem on the sliders page with the backgrounds for number display boxes that I'd like to get fixed.

@funkatron

unwiredben: do you know if fixes in 3.0 will get backported to 2.2 et al? If not soon, mobile devices will still be having lots of issues.

I just took this screenshot under the current OTA version (2.1) on my Pre2 (GSM unlocked on AT&T). Note that the background is transparent; the gradient does not render properly, and the PNG screenshot will show whatever bg is under it.

http://dl.dropbox.com/u/361393/browser_2011-03-05_110237.png

Timing wise, it seems like a hack for webOS will be required until any webkit issues HP has are ironed out and in the hands of most consumers.

@justind000

I'm using SDK 3.0.0.618 and getting display errors similar to the first post.

this is jquerymobile.com/demo as it displays by default.
http://angstuff.zxq.net/Screenshot-1.png

@unwiredben

Looks much better on latest device -- you should upgrade to beta 4 and
use the 627 emulator.

On Sun, May 15, 2011 at 4:25 AM, justind000
reply@reply.github.com
wrote:

I'm using SDK 3.0.0.618 and getting display errors similar to the first post.

this is jquerymobile.com/demo as it displays by default.
http://angstuff.zxq.net/Screenshot-1.png

Reply to this email directly or view it on GitHub:
#1337 (comment)

@unwiredben

actually, beta 627 still shows and issue... this could be due to difference between software rendering and hardware rendering... I'll check in latest non-released emulator.

@unwiredben

Yeah -- I've escalated this internally -- we have an open bug about the text-shadow problems.

@toddparker
Contributor

Thanks @unwiredben for pushing these issues up internally at HP/Palm. Do you have an answer to @funkatron's question about whether these fixes for 3.0 will be rolled back into the 2.x browser as part of a software update?

@unwiredben

We do plan on updating the WebKit build used for system and browser when we next do a major update of the phone software. However, I can't give any specifics about the timing of those releases.

@toddparker
Contributor

@unwiredben - That's great news. So there's hope for 2.x.

@scottjehl
Contributor

Todd, should we close this one out? Seems to be a webos issue we can't do much about...?

@toddparker toddparker was assigned Jun 23, 2011
@toddparker
Contributor

I'll leave this open until we hear back on whether 2.0 is going to get the rendering issues fixed in a software update. I agree that there doesn't seem to be anything we could do on our end to improve this, 2.0 just has broken rendering.

@toddparker
Contributor

I think I'm going to close this one out since it's sort of in Palm/HP's hands and we can't fix their rendering engine.

@toddparker toddparker closed this Feb 15, 2012
@ghtomcat

Actually, you can now ... http://isis-project.org/ .. but that's besides the point. We should make sure the new QtWebKit Browser plays nice with jQuery Mobile.

@toddparker
Contributor

@ghtomcat - Perfect timing. Looking forward to seeing how that develops.

@ghtomcat

@toddparker indeed .. let me know if you need anything

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment