Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Developer
ChristoDeluxe
Posts: 17
Registered: ‎05-31-2011
My Device: Not Yet

Ripple 0.9 for Mac -- doesn't render HTML like a device

Is the Ripple tool supposed to render HTML similarly to a real device?

 

I have tried using the Ripple 0.9 app to emulate a 9800 and a 9700, and the HTML of my web app renders NOTHING like it does on a real device.  I would have liked to use this to test appearance of my web apps on other BB devices, but I have those two devices here, and the HTML just looks wrong.  Everything is the wrong size, fonts don't look right, and in general way more stuff is displayed on the Ripple screen than would on a real device.

 

I'm guessing that this program just uses a desktop style rendering and alters the user agent to look as if it was one of those devices?  if this doesn't actually lay out the page like it would be on a real device, then it does no good for testing.

 

I have confirmed this with my own sites as well as random web browsing on the Internet.

 

It's such a pain to get the device emulators working (and they're Windows-only), so I had hoped this would give me a Mac-friendly way to test on more device types.

New Contributor
yuzz
Posts: 2
Registered: ‎12-01-2011
My Device: BlackBerry Torch 9800

Re: Ripple 0.9 for Mac -- doesn't render HTML like a device

[ Edited ]

I'd like to know this too. Is the weird/wrong text rendering on OSX (I'm on 10.7.2) a known bug? Not only the HTML renders incorrect for me. Text inside the application itself also looks very strange:

 

 

Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Ripple 0.9 for Mac -- doesn't render HTML like a device

[ Edited ]

Try turning off hardware acceleration as outlined in the third row of the Known Issues list..

 

https://bdsc.webapps.blackberry.com/html5/documentation/ww_release_notes/ripple_rn_1.0beta_1885827_1...

 

We're trying to track down all the issues related to OS/Hardware/Graphics Card combinations.

 

Could those that are being affected please post up the following:

 

- OS Version

- Type of Mac you are using (model number etc)

- Video card being used

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Developer
ChristoDeluxe
Posts: 17
Registered: ‎05-31-2011
My Device: Not Yet

Re: Ripple 0.9 for Mac -- doesn't render HTML like a device

[ Edited ]

Hi,

 

Is your reply in regards to the original issue (layout not being similar to real device), or the font issue?

 

See the attached photo for an example of my issue -- my guess is that Ripple is rendering using the desktop WebKit engine, not the real engine from the device being emulated, which does not render pages the same way.  Note how much more content fits into the emulator window.

 

I'm on a Mac running OS X 10.7.2 on a MacBook Pro 15" with a Radeon HD 6490M 256 MB.

 

Thanks,

Chris

 

IMG_1651.JPG

Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Ripple 0.9 for Mac -- doesn't render HTML like a device

[ Edited ]

My reply is for the font issue...

 

For the sizing difference.. what are your viewport meta tags?  There may be a meta tag that you are using that is supported in one environment and not the other.

 

It also looks like the device is showing the browser.. .Ripple emulates a WebWorks application that does not include the browser chrome which provides more screen real estate...

 

It looks like the title bar is taking up space on the device.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Developer
ChristoDeluxe
Posts: 17
Registered: ‎05-31-2011
My Device: Not Yet

Re: Ripple 0.9 for Mac -- doesn't render HTML like a device

Hi,

 

That is the front page of our web app that runs on jQuery Mobile.  The viewport is set like:

<meta name="viewport" content="width=device-width, initial-scale=1">

 

The Chrome at the top (which is really just the page title) isn't enough to account for the extra space in that image.  Note that there are 3 whole rows of visible icons, and the text of that "welcome all attendees" sentence word-wraps on the device and not on Ripple.  The physical device was actually scrolled down a bit, and doesn't even fit 2 rows of icons.

 

I don't mind that the lack of chrome affects height in Ripple (would be nice if you emulated the chrome though!), but I think that the rendering doesn't follow the device's WebKit layout.  In general, mobile WebKit on various devices doesn't lay out the identically to desktop versions like in Safari or Google Chrome.

 

Here's another example this time with a Torch 9800 and a different screen in our app.  Note there's 5 rows on Ripple and just over 3 on the device, and the device's status bar at the top is only a few pixels high (20 maybe?).

 

IMG_1652.JPG

New Contributor
yuzz
Posts: 2
Registered: ‎12-01-2011
My Device: BlackBerry Torch 9800

Re: Ripple 0.9 for Mac -- doesn't render HTML like a device


tneil wrote:

Try turning off hardware acceleration as outlined in the third row of the Known Issues list..

 

https://bdsc.webapps.blackberry.com/html5/documentation/ww_release_notes/ripple_rn_1.0beta_1885827_1...

 

We're trying to track down all the issues related to OS/Hardware/Graphics Card combinations.

 

Could those that are being affected please post up the following:

 

- OS Version

- Type of Mac you are using (model number etc)

- Video card being used


Thank you, Tim!

That solved my problem (I'm sorry I completely missed that in the release notes :smileysurprised: )

 

13-inch Late 2006 (MacBook2,1)

Processor  2 GHz Intel Core 2 Duo

Memory  4 GB 667 MHz DDR2 SDRAM

Graphics  Intel GMA 950 64 MB

Software  Mac OS X Lion 10.7.2 (11C74)

Developer
calgacus
Posts: 237
Registered: ‎07-20-2010
My Device: Not Specified

Re: Ripple 0.9 for Mac -- doesn't render HTML like a device

[ Edited ]

Ripple   looks and works ok on my mac but on windows (ripple 0.9.0.11) its is not rendering its UI nearly well enough to be usable, sometimes my system even freezes when I try so  I can't even  give a screen of how bad it is.  That windows system is:

Video  - Intel(R) 4 series Express Chipset family, Internal, 128MB, Intel(R) GMA 4500, Intel Video BIOS

OS- WinXP Pro v2002 SP3

CPU - Intel Core 2 Quad

Q8400 @ 2.66ghz

2.67 GHz, 3.37 GB of Ram

Moniotr- Flatron W2243T @ 1920x1080

 

But turning off hardware acceleration fixed it.

New Developer
alexperri7
Posts: 325
Registered: ‎10-28-2010
My Device: Blackberry Bold 9900

Re: Ripple 0.9 for Mac -- doesn't render HTML like a device

[ Edited ]

I too am having this problem. I spoke to someone at RIM who spoke to Ripple about it, and I was told to submit it as a bug report. That leaves me off with another question. Does that mean that Ripple is displaying it incorrectly, and that it is rendering the way it should on the device? If so, how would I get it to look like it does in Ripple because that looks much better. Check out my screenshots to see my example.

 

--Edit--

 

After thinking about it, I don't think it is rendering correctly on the device. In the second screenshot (the main screen of the app) I have to scroll down to see the navbar when it is set to the size of the devices screen. Everything is rendering much larger than it should be.

 

AFC_9860_RippleVsDevice_2.jpg

AFC_9860_RippleVsDevice.jpg

---------------------------------
My PlayBook Apps: Pocket Portrait Lighting, Pocket Food Photography, Allergen Free Cooking, Easy Agenda
Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Ripple 0.9 for Mac -- doesn't render HTML like a device

Try setting your viewport meta tag to the following to see if it makes a difference:

 

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" />

 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter