developers.smarttv-alliance.org

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

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

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

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!

thank you for the solution. cheers!

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

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.

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.

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

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!