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
Highlighted
New Developer
Posts: 18
Registered: ‎09-20-2013
My Device: Z10 STL100-2
My Carrier: T-Mobile
Accepted Solution

CSS -webkit-filter not working

Hi,

 

I am facing a little problem - I have defined a custom CSS filter using SVG, I can apply it without problems to any element except <canvas> - there it doesn't apply my custom filter whereas built-in Webkit filters such as blur(), sepia(), etc. work.

 

Any way how to solve or bypass this weird behavior?

 

Thanks and regards

Retired
Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: CSS -webkit-filter not working

Can you please provide a basic sample showing the code you are using?

Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
New Developer
Posts: 18
Registered: ‎09-20-2013
My Device: Z10 STL100-2
My Carrier: T-Mobile

Re: CSS -webkit-filter not working

Here you go, hope it will make sense to you:

 

HTML:

 

<canvas class="filter1"></canvas>

...

<div style="width: 1px; height: 1px;">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="f_1" x="0" y="0">
        <feColorMatrix in="SourceGraphic" type="matrix"
          values="0.87 0.60 -0.33 0 0
          0.00 1.00 -0.02 0 0
          -0.24 0.04 1.00 0 0
          0 0 0 1 0" />
      </filter>

    </defs>
  </svg>
</div>

 

CSS:

 

.filter1 {
  -webkit-filter: url("#f_1");
}

Retired
Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: CSS -webkit-filter not working

I created a very crude sample based on your code as follows.

 

<!DOCTYPE html>
<html>
    <head>
        <title>index</title>
        <link type="text/css" rel="stylesheet" href="styles.css"></link>
    </head>
    <body>
        <img class="filter1" src="eo640.png"></img>
        <canvas id="easel" class="filter1"></canvas>
        <div style="width: 1px; height: 1px;">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <defs>
                    <filter id="f_1" x="0" y="0">
                        <feColorMatrix in="SourceGraphic" type="matrix"
                        values="0.87 0.60 -0.33 0 0
                        0.00 1.00 -0.02 0 0
                        -0.24 0.04 1.00 0 0
                        0 0 0 1 0" />
                    </filter>
                </defs>
            </svg>
        </div>
        <script type="text/javascript">
            window.addEventListener('load', function () {
                var canvas, context, image;
                
                canvas = document.getElementById('easel');
                context = canvas.getContext('2d');
                
                image = document.createElement('img');
                image.onload = function () {
                    canvas.width = 480;
                    canvas.height = 320;
                    context.drawImage(image, 0, 0, 480, 320);
                };
                image.src='eo640.png';
            });
        </script>
    </body>
</html>

Note that this sample relies on a source imaged called eo640.png

 

In Chrome, both <img> and <canvas> elements have the appropriate filter applied. In the BlackBerry 10 browser, only the <img> element does.

 

My recommendation would be to submit this to the Developer Issue Tracker. Note that this does not appear specific to WebWorks, but the browser in general.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.