search

jpdevries / makeanico

Accessible 16x16 favicon WYSIWYG creator
7 stars 0 forks source link

Edge: Does Not Export Very Dirty Artboard #5

Open jpdevries opened 8 years ago

jpdevries commented 8 years ago

the <a download> pattern is used to easily export the graphics by sending the URL params to the API. At a certain point, I'm not sure the exact threshold, Microsoft Edge basically breaks. It doesn't handle the download link correctly and it will only allow you to try and save the file as text.

This feels like an Edge bug to me. The URLs can get large, but all the other browsers handle it fine.

Example of a 4039 character problematic URL in Edge 38.14393

Notice the problematic URL is just the non–problematic URL with more parameter data.

jpdevries commented 8 years ago

Seems like Edge may have a limit of 2048 characters 😢. Other browsers allow URLs much larger.

Stack Overflow: http://stackoverflow.com/a/417184/4671250

jpdevries commented 8 years ago

So, to be clear, this means that art-boards like the problematic URL mentioned above where every cell is filled do not export successfully in Edge because the URL seems to exceed its limits.

AFAIK the spec doesn't enforce a limit. Different browsers have their own limitations.

jpdevries commented 8 years ago

According to this Stack Overflow the URL limit is 81578 character. Our API should never get anywhere near that. 4000 seems to be it.

jpdevries commented 8 years ago

Opened this URL in the Edge bug tracker https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9147485/

I know this means that technically part of the app doesn't work in Edge 😢 (really big art–boards don't export) but I'd make the case that this is a browser issue.

I think this web app has pushed some boundaries also ran into #1 which was discovered why the innerHTML of SVGs not being able to be updated in Edge. I found a work around for that one, but this issue is not so easy to work around. Waiting to here back on the Edge issue. Hoping it is considered a browser bug.

jpdevries commented 8 years ago

It's kind of ironic if you go to
 https://makeanico.herokuapp.com/icos/edge

In Edge and try and export it won't work because of the amount of characters. Safari, Chrome, Firefox work fine. Works in Safari iOS. I believe these browsers support such large URLs they'd scale up to larger favicons sizes but Edge can't seem to handle the 16x16 at this time.

Testing expanded URL:

jpdevries commented 8 years ago

Azure doesn't like big URLs either.

Notice that in the Heroku environment in any browser other than Edge this big fat URLs work just fine:

https://makeanico.herokuapp.com/?c0=0xff00ffff&c1=0xff00ffff&c2=0xff00ffff&c3=0xff00ffff&c4=0xff00ffff&c5=0xff00ffff&c6=0xff00ffff&c7=0xff00ffff&c8=0xff00ffff&c9=0xff00ffff&c10=0xff00ffff&c11=0xff00ffff&c12=0xff00ffff&c13=0xff00ffff&c14=0xff00ffff&c15=0xff00ffff&c16=0xff00ffff&c17=0xff00ffff&c18=0xff00ffff&c19=0xff00ffff&c20=0xff00ffff&c21=0xff00ffff&c22=0xff00ffff&c23=0xff00ffff&c24=0xff00ffff&c25=0xff00ffff&c26=0xff00ffff&c27=0xff00ffff&c28=0xff00ffff&c29=0xff00ffff&c30=0xff00ffff&c31=0xff00ffff&c32=0xff00ffff&c33=0xff00ffff&c34=0xff00ffff&c35=0xff00ffff&c36=0xff00ffff&c37=0xff00ffff&c38=0xff00ffff&c39=0xff00ffff&c40=0xff00ffff&c41=0xff00ffff&c42=0xff00ffff&c43=0xff00ffff&c44=0xff00ffff&c45=0xff00ffff&c46=0xff00ffff&c47=0xff00ffff&c48=0xff00ffff&c49=0xff00ffff&c50=0xff00ffff&c51=0xff00ffff&c52=0xff00ffff&c53=0xff00ffff&c54=0xff00ffff&c55=0xff00ffff&c56=0xff00ffff&c57=0xff00ffff&c58=0xff00ffff&c59=0xff00ffff&c60=0xff00ffff&c61=0xff00ffff&c62=0xff00ffff&c63=0xff00ffff&c64=0xff00ffff&c65=0xff00ffff&c66=0xff00ffff&c67=0xff00ffff&c68=0xff00ffff&c69=0xff00ffff&c70=0xff00ffff&c71=0xff00ffff&c72=0xff00ffff&c73=0xff00ffff&c74=0xff00ffff&c75=0xff00ffff&c76=0xff00ffff&c77=0xff00ffff&c78=0xff00ffff&c79=0xff00ffff&c80=0xff00ffff&c81=0xff00ffff&c82=0xff00ffff&c83=0xff00ffff&c84=0xff00ffff&c85=0xff00ffff&c86=0xff00ffff&c87=0xff00ffff&c88=0xff00ffff&c89=0xff00ffff&c90=0xff00ffff&c91=0xff00ffff&c92=0xff00ffff&c93=0xff00ffff&c94=0xff00ffff&c95=0xff00ffff&c96=0xff00ffff&c97=0xff00ffff&c98=0xff00ffff&c99=0xff00ffff&c100=0xff00ffff&c101=0xff00ffff&c102=0xff00ffff&c103=0xff00ffff&c104=0xff00ffff&c105=0xff00ffff&c106=0xff00ffff&c107=0xff00ffff&c108=0xff00ffff&c109=0xff00ffff&c110=0xff00ffff&c111=0xff00ffff&c112=0xff00ffff&c113=0xff00ffff&c114=0xff00ffff&c115=0xff00ffff&c116=0xff00ffff&c117=0xff00ffff&c118=0xff00ffff&c119=0xff00ffff&c120=0xff00ffff&c121=0xff00ffff&c122=0xff00ffff&c123=0xff00ffff&c124=0xff00ffff&c125=0xff00ffff&c126=0xff00ffff&c127=0xff00ffff&c128=0xff00ffff&c129=0xff00ffff&c130=0xff00ffff&c131=0xff00ffff&c132=0xff00ffff&c133=0xff00ffff&c134=0xff00ffff&c135=0xff00ffff&c136=0xff00ffff&c137=0xff00ffff&c138=0xff00ffff&c139=0xff00ffff&c140=0xff00ffff&c141=0xff00ffff&c142=0xff00ffff&c143=0xff00ffff&c144=0xff00ffff&c145=0xff00ffff&c146=0xff00ffff&c147=0xff00ffff&c148=0xff00ffff&c149=0xff00ffff&c150=0xff00ffff&c151=0xff00ffff&c152=0xff00ffff&c153=0xff00ffff&c154=0xff00ffff&c155=0xff00ffff&c156=0xff00ffff&c157=0xff00ffff&c158=0xff00ffff&c159=0xff00ffff&c160=0xff00ffff&c161=0xff00ffff&c162=0xff00ffff&c163=0xff00ffff&c164=0xff00ffff&c165=0xff00ffff&c166=0xff00ffff&c167=0xff00ffff&c168=0xff00ffff&c169=0xff00ffff&c170=0xff00ffff&c171=0xff00ffff&c172=0xff00ffff&c173=0xff00ffff&c174=0xff00ffff&c175=0xff00ffff&c176=0xff00ffff&c177=0xff00ffff&c178=0xff00ffff&c179=0xff00ffff&c180=0xff00ffff&c181=0xff00ffff&c182=0xff00ffff&c183=0xff00ffff&c184=0xff00ffff&c185=0xff00ffff&c186=0xff00ffff&c187=0xff00ffff&c188=0xff00ffff&c189=0xff00ffff&c190=0xff00ffff&c191=0xff00ffff&c192=0xff00ffff&c193=0xff00ffff&c194=0xff00ffff&c195=0xff00ffff&c196=0xff00ffff&c197=0xff00ffff&c198=0xff00ffff&c199=0xff00ffff&c200=0xff00ffff&c201=0xff00ffff&c202=0xff00ffff&c203=0xff00ffff&c204=0xff00ffff&c205=0xff00ffff&c206=0xff00ffff&c207=0xff00ffff&c208=0xff00ffff&c209=0xff00ffff&c210=0xff00ffff&c211=0xff00ffff&c212=0xff00ffff&c213=0xff00ffff&c214=0xff00ffff&c215=0xff00ffff&c216=0xff00ffff&c217=0xff00ffff&c218=0xff00ffff&c219=0xff00ffff&c220=0xff00ffff&c221=0xff00ffff&c222=0xff00ffff&c223=0xff00ffff&c224=0xff00ffff&c225=0xff00ffff&c226=0xff00ffff&c227=0xff00ffff&c228=0xff00ffff&c229=0xff00ffff&c230=0xff00ffff&c231=0xff00ffff&c232=0xff00ffff&c233=0xff00ffff&c234=0xff00ffff&c235=0xff00ffff&c236=0xff00ffff&c237=0xff00ffff&c238=0xff00ffff&c239=0xff00ffff&c240=0xff00ffff&c241=0xff00ffff&c242=0xff00ffff&c243=0xff00ffff&c244=0xff00ffff&c245=0xff00ffff&c246=0xff00ffff&c247=0xff00ffff&c248=0xff00ffff&c249=0xff00ffff&c250=0xff00ffff&c251=0xff00ffff&c252=0xff00ffff&c253=0xff00ffff&c254=0xff00ffff&c255=0xff00ffff

But Azure won't serve these URLs to any browser:

https://makeanico.azurewebsites.net/?c0=0xff00ffff&c1=0xff00ffff&c2=0xff00ffff&c3=0xff00ffff&c4=0xff00ffff&c5=0xff00ffff&c6=0xff00ffff&c7=0xff00ffff&c8=0xff00ffff&c9=0xff00ffff&c10=0xff00ffff&c11=0xff00ffff&c12=0xff00ffff&c13=0xff00ffff&c14=0xff00ffff&c15=0xff00ffff&c16=0xff00ffff&c17=0xff00ffff&c18=0xff00ffff&c19=0xff00ffff&c20=0xff00ffff&c21=0xff00ffff&c22=0xff00ffff&c23=0xff00ffff&c24=0xff00ffff&c25=0xff00ffff&c26=0xff00ffff&c27=0xff00ffff&c28=0xff00ffff&c29=0xff00ffff&c30=0xff00ffff&c31=0xff00ffff&c32=0xff00ffff&c33=0xff00ffff&c34=0xff00ffff&c35=0xff00ffff&c36=0xff00ffff&c37=0xff00ffff&c38=0xff00ffff&c39=0xff00ffff&c40=0xff00ffff&c41=0xff00ffff&c42=0xff00ffff&c43=0xff00ffff&c44=0xff00ffff&c45=0xff00ffff&c46=0xff00ffff&c47=0xff00ffff&c48=0xff00ffff&c49=0xff00ffff&c50=0xff00ffff&c51=0xff00ffff&c52=0xff00ffff&c53=0xff00ffff&c54=0xff00ffff&c55=0xff00ffff&c56=0xff00ffff&c57=0xff00ffff&c58=0xff00ffff&c59=0xff00ffff&c60=0xff00ffff&c61=0xff00ffff&c62=0xff00ffff&c63=0xff00ffff&c64=0xff00ffff&c65=0xff00ffff&c66=0xff00ffff&c67=0xff00ffff&c68=0xff00ffff&c69=0xff00ffff&c70=0xff00ffff&c71=0xff00ffff&c72=0xff00ffff&c73=0xff00ffff&c74=0xff00ffff&c75=0xff00ffff&c76=0xff00ffff&c77=0xff00ffff&c78=0xff00ffff&c79=0xff00ffff&c80=0xff00ffff&c81=0xff00ffff&c82=0xff00ffff&c83=0xff00ffff&c84=0xff00ffff&c85=0xff00ffff&c86=0xff00ffff&c87=0xff00ffff&c88=0xff00ffff&c89=0xff00ffff&c90=0xff00ffff&c91=0xff00ffff&c92=0xff00ffff&c93=0xff00ffff&c94=0xff00ffff&c95=0xff00ffff&c96=0xff00ffff&c97=0xff00ffff&c98=0xff00ffff&c99=0xff00ffff&c100=0xff00ffff&c101=0xff00ffff&c102=0xff00ffff&c103=0xff00ffff&c104=0xff00ffff&c105=0xff00ffff&c106=0xff00ffff&c107=0xff00ffff&c108=0xff00ffff&c109=0xff00ffff&c110=0xff00ffff&c111=0xff00ffff&c112=0xff00ffff&c113=0xff00ffff&c114=0xff00ffff&c115=0xff00ffff&c116=0xff00ffff&c117=0xff00ffff&c118=0xff00ffff&c119=0xff00ffff&c120=0xff00ffff&c121=0xff00ffff&c122=0xff00ffff&c123=0xff00ffff&c124=0xff00ffff&c125=0xff00ffff&c126=0xff00ffff&c127=0xff00ffff&c128=0xff00ffff&c129=0xff00ffff&c130=0xff00ffff&c131=0xff00ffff&c132=0xff00ffff&c133=0xff00ffff&c134=0xff00ffff&c135=0xff00ffff&c136=0xff00ffff&c137=0xff00ffff&c138=0xff00ffff&c139=0xff00ffff&c140=0xff00ffff&c141=0xff00ffff&c142=0xff00ffff&c143=0xff00ffff&c144=0xff00ffff&c145=0xff00ffff&c146=0xff00ffff&c147=0xff00ffff&c148=0xff00ffff&c149=0xff00ffff&c150=0xff00ffff&c151=0xff00ffff&c152=0xff00ffff&c153=0xff00ffff&c154=0xff00ffff&c155=0xff00ffff&c156=0xff00ffff&c157=0xff00ffff&c158=0xff00ffff&c159=0xff00ffff&c160=0xff00ffff&c161=0xff00ffff&c162=0xff00ffff&c163=0xff00ffff&c164=0xff00ffff&c165=0xff00ffff&c166=0xff00ffff&c167=0xff00ffff&c168=0xff00ffff&c169=0xff00ffff&c170=0xff00ffff&c171=0xff00ffff&c172=0xff00ffff&c173=0xff00ffff&c174=0xff00ffff&c175=0xff00ffff&c176=0xff00ffff&c177=0xff00ffff&c178=0xff00ffff&c179=0xff00ffff&c180=0xff00ffff&c181=0xff00ffff&c182=0xff00ffff&c183=0xff00ffff&c184=0xff00ffff&c185=0xff00ffff&c186=0xff00ffff&c187=0xff00ffff&c188=0xff00ffff&c189=0xff00ffff&c190=0xff00ffff&c191=0xff00ffff&c192=0xff00ffff&c193=0xff00ffff&c194=0xff00ffff&c195=0xff00ffff&c196=0xff00ffff&c197=0xff00ffff&c198=0xff00ffff&c199=0xff00ffff&c200=0xff00ffff&c201=0xff00ffff&c202=0xff00ffff&c203=0xff00ffff&c204=0xff00ffff&c205=0xff00ffff&c206=0xff00ffff&c207=0xff00ffff&c208=0xff00ffff&c209=0xff00ffff&c210=0xff00ffff&c211=0xff00ffff&c212=0xff00ffff&c213=0xff00ffff&c214=0xff00ffff&c215=0xff00ffff&c216=0xff00ffff&c217=0xff00ffff&c218=0xff00ffff&c219=0xff00ffff&c220=0xff00ffff&c221=0xff00ffff&c222=0xff00ffff&c223=0xff00ffff&c224=0xff00ffff&c225=0xff00ffff&c226=0xff00ffff&c227=0xff00ffff&c228=0xff00ffff&c229=0xff00ffff&c230=0xff00ffff&c231=0xff00ffff&c232=0xff00ffff&c233=0xff00ffff&c234=0xff00ffff&c235=0xff00ffff&c236=0xff00ffff&c237=0xff00ffff&c238=0xff00ffff&c239=0xff00ffff&c240=0xff00ffff&c241=0xff00ffff&c242=0xff00ffff&c243=0xff00ffff&c244=0xff00ffff&c245=0xff00ffff&c246=0xff00ffff&c247=0xff00ffff&c248=0xff00ffff&c249=0xff00ffff&c250=0xff00ffff&c251=0xff00ffff&c252=0xff00ffff&c253=0xff00ffff&c254=0xff00ffff&c255=0xff00ffff

Update: I got Azure to serve large URLs in https://github.com/jpdevries/makeanico/commit/de72a0df9fb6cc47dbee57dd4cfb974921f71511

jpdevries commented 8 years ago

Related to #8 and #9 in terms of Microsoft not support large URLs

jpdevries commented 8 years ago

I've confirmed with Azure support that they have a limit of 2048 character URLs. Haven't confirmed with Edge yet but it seems to be the same.

jpdevries commented 8 years ago

Fixed #8 and #9 in https://github.com/jpdevries/makeanico/commit/de72a0df9fb6cc47dbee57dd4cfb974921f71511

Edge still won't export very dirty art-boards, but I'll take it. Ever other browser I've tested does it fine. Even Safari for iOS. Hopefully Edge will support URLs over 2048 characters soon.

jpdevries commented 8 years ago

I've found the Edge tracking issue https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8819146/

It is assigned to someone and notes that

All non-MS browsers don’t have these limitations as they properly implement RFC 2616 which does NOT specify a limit.

and

Upping the limit to 8192 would provide enough “headroom” for our current application needs.

which goes for my application as well. So there's hope for makeanico in Edge yet 🙏 .

jpdevries commented 8 years ago

One hack to possibly work around Edge's URL size limitation would be to check the Referrer Header, assuming Edge sends the whole thing. I'm not sure if the presence of the header can be relied on enough.

jpdevries commented 8 years ago

Sounds like this will be fixed soon!!! 🎉

@jpdevries @MSEdgeDev We're tracking this here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8819146/ Should be fixed in our next preview release, checking to confirm https://twitter.com/kylealden/status/783001831777591296

jpdevries commented 8 years ago

Ok maybe not as soon as we hoped, but it is being tracked. And Edge moves quick these days.

@jpdevries Looks like I was mistaken - we do have work to support longer URLs in the future but current bug fix is scoped to XHR preflight https://twitter.com/kylealden/status/783022133819551744

jpdevries commented 8 years ago

I tried this

One hack to possibly work around Edge's URL size limitation would be to check the Referrer Header, assuming Edge sends the whole thing. I'm not sure if the presence of the header can be relied on enough.

Still doesn't work because I think Edge doesn't send the entire URL in the Header.

Could send the dataURI over XHR but that still doesn't fix no-js support.

IanPuchetti commented 6 years ago

Any news about a possible solution? I'm having the same problem with urls in edge :disappointed: