Description:
I've checked similar issues, but none of the provided solutions seem to work in this case. My assumption is that this has something to do with pdf document itself, appreciate if anyone could take a look.
Steps to reproduce
Here is the sandbox with the example
https://codesandbox.io/embed/gallant-thunder-x3o7v7?fontsize=14&hidenavigation=1&theme=dark
Expected behavior
Links are clickable. Please see the online demo https://projects.wojtekmaj.pl/react-pdf/
Actual behavior
Links are not clickable
Interesting fact, that google viewer does not open the links either (pages 4, 5), but if you download the document, links are working. I'm using default previewer on MacOS
Environment
React-PDF version: 5.7.2, same behaviour on 4.1.0
React version: 18.0.0, same on 16.4.0
Also, I used iframe and embed, and really it make link clickable but its not display pdf on safari IOS
The problem is you are using a "virtual PDF reader" (GoogleDocs/Mozilla PDF.js) which produces images and searchable text as separate layers, the link is there but it is the highlighted yellow zone not the blue underline text. also due to browser security I have to right click to open at my choice in new tab or new window (my choice would be save link as PDF for offline viewing).
In a true PDF viewer like Chrome embedded PDF Plugin or the users iFrame / offline viewer, the links would work perfectly. Again whichever way the user decides.
Related
All the articles on our blog are triggering the "Text too small to read" error in Google Search Console (Mobile Usability).
We were not able to validate this issue upon checking ourselves --
However, when view the same tested page in Google Search Console and view the screenshot, we see that the Googlebot smartphone rendering is compressing the content to about 1/3rd of the viewport --
Here is the source code related to the example in the screenshots --
https://jsbin.com/munofohoke/edit?html,js,output
<a class="jsbin-embed" href="https://jsbin.com/munofohoke/embed?html,js,output">Finding Corporate Philanthropy a Challenge? Let This Primer Guide You | flevy.com/blog on jsbin.com</a><script src="https://static.jsbin.com/js/embed.min.js?4.1.8"></script>
Any idea on how we can fix this?
The source code is the full webpage, as we are unable to replicate the Google Search Console issue locally. We are using Wordpress and the Canvas WooTheme.
Thanks.
I am working on a news website, trying to implement amp. We are using Mobile_Detect.php to serve desktop pages to desktop and tablets, and mobile version to mobile phones and that works OK, our pages are mobile friendly according to Google for some time now, no problem.
Now, I started to enter the code for amp pages and encountered a situation I can' resolve. URL for the amp version have .amp at the end. Depending on the user's device, we are generating the page from the database and serving different pages to different devices.
Now, PageSpeed Insights and Mobile-Friendly Test shows that the page is mobile friendly but amp validator is pulling the desktop page, I can see by the source code it prints out, instead of a mobile page. I'm on the desktop, Chrome, but I'd expect it to work with mobile pages.
You can see that here: https://validator.ampproject.org/#url=http%3A%2F%2Fwww.poandpo.com%2Fbusineasdfasdfas-usual%2Fpublic-housadfadf-kong-972016223.amp
I installed Chrome amp extension and it says "AMP available" but when I click on it it also pulls the desktop version of the page and it's blank. I would expect the extension to load the mobile page but it doesn't.
We do have links canonical and amphtml, that's why the extension says there is an amp page.
So, how to tell validator to pull the mobile version of the page? The amp implementation is not done yet and I know there are some things missing, but without a validator is a bit hard to program.
Another interesting things is that when I open "Inspect" in Chrome and toggle to responsive design, it shows the mobile version of the webpage correctly. It also says "Powered by amp" and shows no errors although there are errors because we didn't even implemented all tags.
If anybody has any suggestion how to make amp validator to show the mobile page I'd appreciate that. Thank you.
I had a quick look at your pages but it appears that the amphtml reference but there appears to be a problem in the URL you are generating in the href= field. If you take a close look, the AMP URL is missing a '/'.
Broken: http://www.poandpo.com/business-as-usualmexicans-work-longest-hours-germans-the-least-97201645.amp
Works: http://www.poandpo.com/business-as-usual/mexicans-work-longest-hours-germans-the-least-97201645.amp
In Chromium / Chrome I can use "Inspect element" to view a list of the current page's resources, including JS, images, videos. Basically, all files that have been downloaded in service of that page.
When I "Inspect element" in Firefox I can't find an equivalent. Am I missing it, or is there another way to access the list of files?
From the Tools menu, pick Page Info
In the Page Info window, select the Media tab
...the list of files downloaded for that page will appear under the Media tab.
In order to view resources like js or css files, you would select Network in the developer tools panel to open the Network Monitor. This will show all resources downloaded by the page (including images, media etc.)
From there you can narrow your search based on the type of resource you're looking for by selecting the appropriate tab at the top of the window. To inspect its contents, select the resource from the list and click the Response tab in the window that appears to the right.
On Windows, press 'F12' to open developer tools then select 'Network'. Under 'Network' select the filter labelled 'Images'. Reload your page and the images will be listed there along with their links. You can open them in a new tab and save them on your device.
After opening the Inspect Element console; Look for the Toolbox options at the TOP RIGHT CORNER (highlighted in BLUE as shown in the Picture link below)
Click on it and under the "Default Firefox Developer Tools" ; Click on the ones that you want to get displayed. (As per the link you gave for the Google Chrome that displayed the "Resources" - the equivalent in Firefox would be "Storage", as shown below
Toolbox Options--> Storage
Hope this helps :)
I created a simple form based app using Sencha Touch 2.2.0. According to Sencha's website, Sencha Touch should work on Internet Explorer 10. When I double click on the app.html file using Safari, everything works. The same is true for Google Chrome on Windows. When I try the same with Internet Explorer, only the titles of the fieldset appear and no fields are visible. In other words, the form is unusable. I am able to go to Sencha's website and get the Kitchen sink demo working via Internet Explorer but cannot create a project myself that works.
I tried switching to a Windows theme and the form showed some fields but was still unusable.
I was wondering if there's a trick to get a basic Sencha application working with Internet Explorer. I am using Sencha Architect 2.2.2 for this project as well.
Check the console log. See if there are any errors there. IE and Chrome/Safari have different tolerance level to some "syntax" errors in JS - for example comma before the closing bracket - IE will not tolerate that.
I also remember there were some issues with simple console.log() under IE which is used widely for trace.
Try adding the following to your stylesheet:
.x-form {
background-color: black !important;
}
I am Clicking on the browse button in IE using Selenium Webdriver code in an upload file utility by reading the co-ordinates of the browse text. Whlie the code works fine in some machines in IE and firefox both, in yet another machine the same code is working for firefoxx but the browse button becomes unclickable in IE. We checked the settings in internet options, everything looks alike in both machines.
Please let us know if anyone faced any such issue and the resolution that could work.
If there is any other way to upload the file in your app by avoiding the "Browser" button method, then that is always preferred. Some people will use Apache HTTPComponents to do a POST upload to the servlet that the "Browse" button refers to. That is by far the preferred method rather than using WebDriver. The problem with the Browse button is that it opens native OS controls ( in some cases) and the only way you can control those is by using the Sikuli API to click on elements based on finding them with matching screenshots. Also, if you use Sikuli, you can't run multiple browser tests on the same machine since each test will block screen comparisons of another test and that will rule you out of using RemoteWebDriver.