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

background-color css causes PDF text to become invisible. #39

Closed
jasonburrows opened this issue Dec 15, 2016 · 6 comments
Closed

background-color css causes PDF text to become invisible. #39

jasonburrows opened this issue Dec 15, 2016 · 6 comments
Milestone

Comments

@jasonburrows
Copy link

If either the containing div specifies a background-color css property, or the pdf-viewer element itself contains this property, the PDF text is no longer visible. I can tell it is still there as I can select it, but you can't see it.

Specifically, in either of the following examples, the text and background color will both be red and thus, the text will not be visible:

        <div>
           <pdf-viewer  [src]="pdfSrc"
                        [(page)] = "page"
                        [original-size]="true"
                        style="display: block;background-color: red;">
           </pdf-viewer>
        </div>
        <div style="background-color: red;">
           <pdf-viewer  [src]="pdfSrc"
                        [(page)] = "page"
                        [original-size]="true"
                        style="display: block;">
           </pdf-viewer>
        </div>

@yuritpinheiro
Copy link

I had the same issue and found a work around / cause, when the page is rendered its z-index is set to -1, and if you change this parameter the page became visible again. Just found the issue and tested this.

@jasonburrows
Copy link
Author

Yeah I've experimented with including "z-index: 2;" in the style attribute but it doesn't make any difference in how it displays. Where exactly were you changing the z-index?

Thanks!

@yuritpinheiro
Copy link

at styles on the browser F12. There a simple solution, don't know if it fits your problems, but if you set the option render-text to false it works to.

[render-text]
Enable text rendering, allows to select text

Hope it helps.

@jasonburrows
Copy link
Author

Ah - I see. I have a workaround as well for now (I just don't specify a background color for the containing div and everything is OK). Thanks for your help!

@yuritpinheiro
Copy link

setting the render text you may set the back color

VadimDez added a commit that referenced this issue Jan 10, 2017
Create stacking context. fix #39 #43
@VadimDez VadimDez added this to the 0.1.6 milestone Jan 10, 2017
@prashanthyD
Copy link

setting the render text you may set the back color

Hi all,

If i will give render-text = false. then also in Google Pixel 3 i am getting the text in white color from 14th page of PDF. in other devices it is normal.

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

4 participants