Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chrome 66+ / Firefox new Canvas implementation #201

Open
ariccadonna opened this issue May 3, 2018 · 2 comments
Open

Chrome 66+ / Firefox new Canvas implementation #201

ariccadonna opened this issue May 3, 2018 · 2 comments

Comments

@ariccadonna
Copy link

Apparently the new Canvas render context implementation of newest Chrome 66 and later and the new Firefox can't render the image anymore on the canvas with the rasterizeHTML older implementation.
This is the fix we should operate to have the library working again to latest browsers updates, but, at the moment, we have no resources to put on this issue, please, to the mantainers, have a look:
https://developers.google.com/web/updates/2018/04/nic66#css-paint-api

@cburgmer
Copy link
Owner

cburgmer commented May 3, 2018

Can you clarify whether something is already broken, or what exactly you think will break? The unit tests currently work in both current Chrome and Firefox on OSX for me, so it looks good to me.

@ariccadonna
Copy link
Author

It's already broken, we're using the allinone version as a standalone js in our project. It's was working on chrome 65 (tested on several workstation) but after the update to chrome 66 (OSX and Win) it's no longer working.

The page we are rendering has inside the DOM an SVG element with an IMAGE tag like:

<div class="svg_node" style="width:100%;height:100%">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080" style="width: 100%; height: 100%;" preserveAspectRatio="xMidYMid meet">
      <g clip-path="url(#mask)">
         <g clip-path="url(#cp)" style="display: block;" transform="matrix(0.55,0,0,0.55,693.9992,288.9993)" opacity="1">
            <g class="png" style="display: block;" transform="matrix(1,0,0,1,0,0)" opacity="1">
               <image width="960px" height="840px" preserveAspectRatio="xMidYMid slice" xlink:href="http://via.placeholder.com/960x840"></image>
            </g>
         </g>
      </g>
      <defs>
         <clipPath id="mask">
            <rect width="1920" height="1080" x="0" y="0"></rect>
         </clipPath>
         <clipPath id="cp">
            <path d="M0,0 L960,0 L960,840 L0,840z"></path>
         </clipPath>
      </defs>
   </svg>
</div>

The image is self hosted with CORS enabled and if we remove the image tag from the DOM the render is working smoothly without any problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants