injecting html (inside the extension) inside iframe using content script shows blurry
Reported by
bertugko...@gmail.com,
Mar 28 2018
|
||||||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
Steps to reproduce the problem:
1. Create an extension and create a .html page
2. Using content script, inject an iframe and set the src path of iframe as chrome.extension.getURL('views/my_iframe.html')
3. When you check the injected html inside the iframe, it's blurry; however if you visit http://chrome-extension://ext_id/views/my_html.html it's not blurry
What is the expected behavior?
What went wrong?
When the html is injected into iframe, it's blurry but shouldn't be. Also inspect element items get zoomed in too.
Did this work before? N/A
Does this work in other browsers? N/A
Chrome version: 65.0.3325.181 Channel: stable
OS Version: OS X 10.12.6
Flash Version:
For utilising content script advantages, I tried writing html code inside my chrome extension and tried injecting it into a created iframe using content script. It actually works, however it seems blurry (I have tried --webkit-font-smoothing: antialiased - and also if I go to the direct URL of the html page inside the extension (http://chrome-extension://ext_id/views/my_html.html), it doesn't get blurred on the actual html).
```
var elt = document.createElement('iframe');
elt.id = 'my_iframe';
elt.src = chrome.extension.getURL('views/my_iframe.html')
elt.setAttribute('scrolling', 'no');
document.getElementsByTagName('body')[0].appendChild(elt);
```
This is the approach I used. And again, if I go to http://chrome-extension://ext_id/views/my_html.html it doesn't get blurry
I have explained the issue in detail in StackOverflow. You can see it with images there:
https://stackoverflow.com/questions/49529926/injecting-html-inside-extension-inside-iframe-using-content-script-shows-blurr
,
Mar 28 2018
,
Mar 28 2018
,
Apr 4 2018
Unable to reproduce the issue on chrome reported version 65.0.3325.181 using Mac 10.12.6 with steps mentioned below: 1) Launched chrome reported version and extracted the zip file provided in comment#0 2) Dragged and dropped the .html file provided in it, text is clear and didn't observed any blurry @Reporter: Please find the attached screen cast for your reference and provide your feedback on it, try to test this issue by creating new person with no apps and extensions in it and let us know if the issue still persists. Thanks!
,
Apr 4 2018
@viswa.karala This is exactly what the issue is. Steps to reproduce the issue: - Drag & drop the extension to chrome://extensions in Developer mode, like you normally install the extensions (not open the view.html inside the extension). - Then go to any website - Click on the extension icon in toolbar - The html inside the iframe created is blurry (whereas if you open the views/test.html it's not blurry). Again, the problem is: the injected html page in iframe is blurry page while the html page itself is not blurry (so it's not antialiasing issue).
,
Apr 4 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 9 2018
Checked the issue on reported chrome version 65.0.3325.181 and on the latest canary 67.0.3390.0 using Mac 10.12.6 and Mac 10.13.1 with the below mentioned steps. 1. Launched Chrome 2. Enabled developer mode in Chrome://extensions 3. Used drag and drop method to install the given extension. 4. Opened a new tab and navigated to www.google.com 5. Clicked on extension icon on tool bar. We didn't observe any blur in text. Attaching the screen cast of the same. @Reporter: Could you please have a look at the screen cast and let us know if we have missed anything. Any further inputs from your end may help us. And please check the same in a new profile and let us know if the issue still persists. Thanks!
,
Apr 9 2018
Exactly like you showed. The text is blurry and not rendering properly inside the iframe if we use external html. I think you didn't notice but it's there. If you zoom it to the browser, you'll see that it is blurry. As you know, fonts don't get blurry when zoomed, but it is inside injected iframe. Here I am attaching an image to show this. (Image 1) On the other hand, if I inject a live website into the iframe for example, it is crystal clear (like it should be). (Image 2) For showing it better, I tried increased the font-size (to 150px) inside the index.html, so you can see it better. - Image 3 shows a screenshot from index.html + zoomed inside the browser. - Image 4 shows the same page injected in the iframe. And on Image 5, see the google.com fonts and "Hello" text inside the extension. It clearly shows the texts are not rendered properly inside the iframe like they do on webpages.
,
Apr 9 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 27 2018
Able to reproduce the issue on Mac 10.12.6 using chrome latest stable #66.0.3359.139 and latest canary #68.0.3409.2. Issue is not seen in OS-win and OS-linux. This is a non-regression issue as it is observed from M60 old builds. Hence, marking it as untriaged to get more inputs from dev team. Thanks...!!
,
Apr 28 2018
Update: I tried wrapping my html block inside #document in iFrame and this seems to fix the issue; in fact, with this method, from index.html, I can't get the path names of extenral js and css files, thus I needed to copy all my js and css files into one html file.
Regarding the issue, if it wasn't blurry, I'd much prefer original method over this #document method I mentioned.
```
$("#my_iframe").load( chrome.extension.getURL('views/index.html'), function(response) {
console.log(response);
var container = document.querySelector('#my_iframe');
container.contentDocument.open();
container.contentDocument.write(response);
container.contentDocument.close();
$('body').find('#my_iframe').animate({opacity: 1});
});
```
|
||||||||||||||||||
►
Sign in to add a comment |
||||||||||||||||||
Comment 1 by bertugko...@gmail.com
, Mar 28 201826.9 KB
26.9 KB View Download
15.5 KB
15.5 KB View Download