In Browser, selection appears around images

by **reblut** » Mon May 12, 2014 11:43 am

We are making an HTML app to run into any TV browsers and I 've come across a problem with the Philips' browser. On the app we have a custom navigation that should be controlled with a dpad remote. We change the css class of each element that should have the focus.

On the Philips tv Browser, as soon a we hit any arrows on the dpad, a green box appears around the first image. We want to avoid this, as most of the time the green box is out of sync we the app's cursor.

Is there a meta tag or a css directive I can add to my code to disable the green box function?

Thank you

by **reblut** » Mon May 12, 2014 11:43 am

We are making an HTML app to run into any TV browsers and I 've come across a problem with the Philips' browser. On the app we have a custom navigation that should be controlled with a dpad remote. We change the css class of each element that should have the focus.

On the Philips tv Browser, as soon a we hit any arrows on the dpad, a green box appears around the first image. We want to avoid this, as most of the time the green box is out of sync we the app's cursor.

Is there a meta tag or a css directive I can add to my code to disable the green box function?

Thank you

by **mdelahoz** » Mon May 12, 2014 11:43 am

We are experiencing similar issue with philips. when we navigate with the remote a second blue box appear and is out of sync with the focus we are handling. We will appreciate some suggestions to get rid of the blue box . thank you

by **reblut** » Mon May 12, 2014 11:43 am

We finally found a solution for that. You need to add a css directive as follow:

outline: 0 solid;

I guess you could put this in your reset.css or something similar.

Cheers!

by **mdelahoz** » Mon May 12, 2014 11:43 am

thank you for the solution. cheers!

by **SDK_STA** » Mon May 12, 2014 11:43 am

Hi,

please note that this problem occurs when testing pages via the \"open internet\" browser on the TV. In an actual production service (launched via the portal), your app will not display any highlight and the work around is not required.

Kind regards,

Smart TV Alliance

by **martinvc** » Mon May 12, 2014 11:43 am

You can add a the header
Content-type: application/ce-html+xml;charset=\"UTF-8\" or
Content-type: application/ce-html+xml;charset=\"UTF-8\";supportspointer=true (if your app supports a remote pointer)
to your index page on server side. Then your app will be seen as an app, even in the browser. But of course you have to be compatible with XHTML to make that work. Especially older Philips TVs are very picky regarding XHTML.

by **SDK_STA** » Mon May 12, 2014 11:43 am

Hi,

thanks for your input Martin, please note that adding this header to a Smart TV Alliance application is not required and indeed causes incompatibility issues.
These type of workarounds should *not* be used for any production ready application, as it makes the application incompatible with the Smart TV Alliance specification.

by **mdelahoz** » Wed May 14, 2014 6:13 am

We are experiencing similar issue with philips. when we navigate with the remote a second blue box appear and is out of sync with the focus we are handling. We will appreciate some suggestions to get rid of the blue box . thank you

by **reblut** » Wed May 14, 2014 6:19 am

We finally found a solution for that. You need to add a css directive as follow:

outline: 0 solid;

I guess you could put this in your reset.css or something similar.

Cheers!