ImageResizer - Firefox background color - imageresizer

I am using the image resizer tool (which is amazing), and I have a question regarding the bgcolor parameter and FireFox. On Chrome, everything works great... my image is padded to the dimensions I want as you can see here:
http://i.imgur.com/aDD0Eea.png
However, with the same image processing in FireFox, I get black bars on the top and bottom of the padded image:
http://img196.imageshack.us/img196/425/xply.png
My querystring is this:
&w=189&h=230&mode=pad&anchor=middlecenter&bgcolor=white
NOTE: full link isn't posted because it is on a staging server and not yet public.
I'm not sure if I'm doing something wrong, but confused as to why it doesn't work in FireFox...
Thanks!
EDIT: Per request of ImageResizer author:
Full path after host: JGAImages/5053488_o/8c15484f-2988-4bb4-a7e5-cca1787d403b/jpg?v=2&w=189&h=230&mode=pad&anchor=middlecenter&bgcolor=white
Version I'm using: 3.3.3 - March, 2013

Your query string isn't reaching the server; ImageResizer doesn't see the bgcolor=white command
Typically this happens when ASP.NET (or a JS library) 'helpfully' URL-encodes your ?, thus causing ASP.NET to discard the query string.
It can also happen if you simply forget the ?, or if a CDN or caching layer is stripping the query string.

This should perhaps be a comment, but I don't have enough reputation to do that, but is the black background part of the Firefox background that it uses when showing any image? I don't use Chrome, but does that add a white background? Maybe both Firefox and Chrome are seeing the padded white as a transparent colour?

Related

TinyMCE 5 - large images pasted via Safari do not render correctly

We are running TinyMCE version 5.4.1 with various options including:
paste_data_images: true
powerpaste_allow_local_image: true
When we drag & drop (or paste) in smaller images (400px X 400px) everything seems to work fine. The Base64 encoding is saved to the database and the image is rendered from all browsers, Chrome, Firefox and Safari.
However, when we paste in a larger image (1920px x 1081px) the image is only saved and rendered correctly in Chrome and Firefox. In Safari the Base64 encoding is saved with all lowercase characters. Therefore it doesn't render when attempting to view it. Has anyone else experienced this?
I have searched here as well as on the TinyMCE website but don't see anything mentioning this behavior. We will eventually attempt to move away from this Base64 implementation as it's no longer recommended but it's what we have for the time being so I'm just trying to address this issue.
When the page loads, its' elements can do so in parallel. But when the browser sees the base64 image, it blocks the page from loading until this image is rendered. Thus, inserting large images into the page as base64 is certainly not a good practice - it may slow down page loads and worsen the UX.
To fix this problem and maybe several other issues, utilizing the automatic_uploads option is highly recommended. It will upload pasted images on the server instead of converting them to base64. Here is the example of the PHP upload handler that will upload images and give their URLs back to TinyMCE.
Concerning the issue with Safari, some minimal reproducible example would be very useful.
I should also mention that PowerPaste is a premium feature that will not work with TinyMCE opensource. If you are using the paid version of TinyMCE, you can create a support ticket.

Selenium + Firefox: transparent element screenshots

I'm taking screenshots of elements in Selenium using the Firefox driver's element.screenshot_as_png. The resulting images include other elements that are underneath, as well as a white background behind everything (even though the page has no background colour set).
I just want the element alone on a transparent background, nothing else. According to this answer there's a way to do it in Chrome. Any chance to get the same thing with Firefox?
You Can Take Screenshot Like That!
driver.get_screenshot_as_png()
You Can Also Use Pillow!
import pyscreenshot
im = pyscreenshot.grab()
im.save('ss.png')

TestCafe Screenshot: Browser Provider for Android. crop.js "Unable to locate the page area in the browser window screenshot"

I work on an extension of the testcafe-provider-android. I want it to support Firefox and screenshots.
Screenshots are taken with the Android Debugging Tools. It works fine with Chrome, but not with Firefox.
crop.js#calculateMarkPosition() can not find the mark.
I think I understood how the mark thing works.
In utils.js#generateScreenshotMark() a string of 32 zeros or ones is generated, this is the "id".
“1” becomes a white dot and “0” becomes a black dot.
The "markSeed" is the id transformed into a Byte Array.
"markData" Is the base64 encoded image, ready to be used in an URL.
On the client, screenshot-mark.js places this image in the bottom right corner of the page.
crop.js#calculateMarkPosition() scans the screenshot line by line in order to find the mark and to crop the image properly.
Here are IDs and Screenshots for Chrome and Firefox:
Note: I manipulated the code to always generate the same ID. The Screenshots are cropped and zoomed in.
ID:
00101111000011000011000011110100
Chrome:
Firefox:
In my eyes, they look the same. So why does this not work?
If you can crop screenshots using third-party tools, you need to disable built-in screenshot mark generation by setting the hasChromelessScreenshots property to false.
I'd recommend you open a new issue on the TestCafe repository and provide all screenshot sources.
I found the reason for this behaviour.
In Chrome the black dots have the rgba value rgba(0, 0, 0, 1), while in Firefox they are rgba (1, 1, 1, 1);
This is why the index can not be found - the values are not as expected.
Now I need to find out, if this is a bug in Firefox.
UPDATE:
This happens because Firefox makes color adjustments.
The problem is described in TestCafe Bug #2918 and was resolved with TestCafe Pull Request #3732
We now just need to wait for the next release.

Safari displays my site terribly

Im a new developer, and I just finished my first site. Works fine in all browsers, except safari.
Unfortunately I didn't install a copy of safari while I was developing it, so these issues went unnoticed. I did check every other large browser tho.
Figuring, if it worked in IE it should work in anything else...
Please open up www.enniya.net in safari, and than in chrome or some other browser to see what I am taking about.
By looking at it I do have a theory.
The background, font, colors, transparencies of divs, border colors, thats all their, but the positioning is destroyed.
But the logo position is correct, so my first theory is that
90% of the content is positioned with vw and vh
while the logo actually uses % for positioning...
Except that the latest readings tell me the newest versions of safari understand VH and VW ??? So I dont know.
If you need to see my code let me know, I didn't provide it initialy because Im not really sure what specifically I could provide that would solve this problem.

Safari 6's New Developer Toolbar doesn't show Form Data in XHR/AJAX Requests

Safari recently went to version 6 (Lion/Mtn Lion) and they've changed over from the standard webkit dev tools to one that's much more XCode looking, my problem other than the OCD of not liking things change is that in the resource tab (or anywhere you can track down the DataService.aspx/AJAX calls) I can no longer see the form data that I am passing.
Can anyone point me to where I can find that data so I don't have to console out my params when I'm testing new data service/backend calls?
I've logged a bug with Apple, they've marked it as a duplicate so hopefully they've received enough requests to fix this, until then I'm continuing to use chrome as the webkit developer is the same as safari's old version.
You can find this info in Instrument tab (stop-watch icon). In the left sidebar thers Timelines row, click the grey circle (record button) on the right. Then click to Network Requests where you see all reqs, and you have to click small icon on the right oc request to display response headers and all form data are available in right panel. Panel can be hidden same as left one (in case you dnt see it).
Unfortunately there are no query pamaters listed, according to this disscussion. I belive its a bug in safari
Edit 15.May 2013: This bug was fixed in Safari 6.0.3.
As far as I can tell, there's no way to show the request parameters.
This goes even further. I can't see the JSON response data either (no clickable arrows to show the containing Javascript objects within the JSON, just pure text)
I think we have to switch to Firefox /w Firebug or regular Webkit in order to get XHR monitoring...
Guys if you want to see post data in safari 6 which is not possible right now, install the firebug lite extension and there you go you have the post data.
I used it and it works great with safari 6
Actually the request headers, response headers and query parameters are in the details sidebar on the right when using the resources view or if you click to see the content of a request in the Timelines/Network Requests view. Took me a few minutes to find that too.
If you need to see what the device is actually sending and your server is on a Windows Machine I use http://www.Wireshark.org and check on the server side of things. No interpretation by any WebKit stuff and very valuable (such as issue with iOS and the 'Blob' data). Similar network snooping should exist on Mac as well.